<template>
    <div>
        <van-tabbar v-model="active" z-index="99" router @change="onChange">
            <tabbar-item v-for="item in tabbarList" :key="item.index"
                         :title="item.name" :index="item.index"
                         :imgSrc="active === item.index ? item.activeSrc : item.normalSrc"/>
        </van-tabbar>
    </div>
</template>

<script>
    // 引入tabbarItem
    import tabbarItem from "./tabbarItem";

    export default {
        components: {tabbarItem},
        data() {
            return {
                active: 'home',
                tabbarList: [
                    {
                        index: 'home',
                        name: '首页',
                        activeSrc: 'static/images/myTabbar/home-active.png',
                        normalSrc: 'static/images/myTabbar/home.png'
                    },
                    {
                        index: 'classify',
                        name: '分类',
                        activeSrc: 'static/images/myTabbar/classify-active.png',
                        normalSrc: 'static/images/myTabbar/classify.png'
                    },
                    {
                        index: 'nightMarket',
                        name: '夜市',
                        activeSrc: 'static/images/myTabbar/night-market-active.png',
                        normalSrc: 'static/images/myTabbar/night-market.png'
                    },
                    {
                        index: 'shoppingCart',
                        name: '购物车',
                        activeSrc: 'static/images/myTabbar/shopping-cart-active.png',
                        normalSrc: 'static/images/myTabbar/shopping-cart.png'
                    },
                    {
                        index: 'my',
                        name: '我的',
                        activeSrc: 'static/images/myTabbar/my-active.png',
                        normalSrc: 'static/images/myTabbar/my.png'
                    },
                ]
            }
        },
        methods: {
            onChange(index) {
                this.active = this.tabbarList[index].index;
            }
        },
        mounted() {
            // 通过window.location.hash获取当前url接口地址部分，刷新时更新active
            let path = window.location.hash.split("#")[1].split("/")[1];
            this.active = path ? path : "home";
        }
    }
</script>

<style lang="less" scoped>
    // 底部区域
    /deep/ .van-tabbar {
        width: 100%;
        height: 98px;
    }
</style>
